<template>
    <div>
        <div class="time-limit">
            <i class="fa fa-clock-o" aria-hidden="true"></i>
            本期月票榜截止日期还剩: <span class="time-num">{{day}}</span> 天 <span class="time-num">{{h}}</span> 小时
        </div>
        <rankItem   
            v-for="item,index in rank_data"
            :key="'78787787878'+ index"
            :itemData='item'>   
        </rankItem>
        <div @click="addItem" class="btn-add-item" v-if="rank_now < rank_num">加载更多</div>
    </div>
</template>

<script>
import rankItem from "@/components/rankItem.vue"
export default {
    name: 'myRank',
    components: {
        rankItem
    },
    data() {
        return {
            month_day:[31,28,31,30,31,30,31,31,30,31,30,31],
            day: 0, //月票剩余天数
            h: 0, //月票剩余小时数
            timer_refresh: null, //刷新剩余时间的计时器
            rank_data: [], // 放排行的item
            rank_num: 3, //可以请求加进rank_data数组的次数
            rank_now: 0, //现在请求了rank_data数组的次数
        }
    },
    created() {
        this.timeRefresh();
        this.timer_refresh = setInterval(()=>{
            this.timeRefresh();
        },1000);
        this.addItem();
    },
    methods: {
        // 更新月票的剩余时间
        timeRefresh() {
            let d = new Date();
            // 若不是2月
            if(d.getMonth() != 1) {
                this.day = this.month_day[d.getMonth()] - d.getDate();
                this.h = 24 - d.getHours();
            }else {
                // 是2月就检测是否是闰年
                if((d.getFullYear() %100==0 &&  d.getFullYear() %400==0) || (d.getFullYear() %100!=0 && d.getFullYear()% 4==0)){
                    // 是闰年，2月有29天
                    this.day = 29 - d.getDate();
                    this.h = 24 - d.getHours();
                }else {
                    this.day = this.month_day[d.getMonth()] - d.getDate();
                    this.h = 24 - d.getHours();
                }
            }
        },
        // 增加排行的item
        addItem() {
            if(this.rank_now < this.rank_num) {
                this.$axios.get('./static/myRank' + this.rank_now + '.json').then(response => {
                    let arr = response.data.ranklist;
                    arr.forEach((item,index)=> {
                        item.id = Symbol();
                        item.No = this.rank_now*10 + index +1;
                    })
                    this.rank_data.push(arr);
                    // console.log(this.rank_data);
                    this.rank_now ++;
                }, response => {
                    // console.log("error");
                    alert('网络请求错误')
                });
                
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.time-limit {
    font-size: 14px;
    font-weight: bold;
    background-color: rgb(240, 240, 240);
    color: #333;
    padding: 10px 6px;
    border-bottom: 1px solid #ccc;
    .time-num {
        background-color: #FF4544;
        color: white;
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 50%;
        position: relative;
        top: -1.875px;
    }
}
.btn-add-item {
    width: 90%;
    margin: 10px auto;
    border: 1px #ccc solid; 
    background-color: #f2f2f2;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    text-align: center;
}
</style>